<template>
	<view class="content">
		<view class="water_top">
			<canvas canvas-id="watermark" style="width: 100%;height: 100%;"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				default: () => ''
			},
			jobNo: {
				type: String,
				default: () => ''
			},
			time: {
				type: String,
				default: () => ''
			}
		},
		data() {
			return {
				defaultName: '',
				defaultJobNo: '',
				defaultTime: this.getCurrentTime()
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.createWatemark();
			})
		},
		methods: {
			getCurrentTime() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始
				const day = String(currentDate.getDate()).padStart(2, '0');
				const hours = String(currentDate.getHours()).padStart(2, '0');
				const minutes = String(currentDate.getMinutes()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			createWatemark() {
				let ctx = uni.createCanvasContext('watermark', this);
				const name = this.name || this.defaultName;
				const jobNo = this.jobNo || this.defaultJobNo;
				const time = this.time || this.defaultTime;

				ctx.rotate((45 * Math.PI) / 185);
				ctx.setFontSize(24);
				ctx.setFillStyle('#000');
				for (let j = 1; j < 30; j++) {
					//用for循环达到重复输出文字的效果，这个for循环代表纵向循环
					// ctx.beginPath();
					ctx.setFontSize(10);
					ctx.setFillStyle('rgba(169,169,169,.2)');

					ctx.fillText(name, 0, 100 * j);
					ctx.setFontSize(10);
					ctx.fillText(jobNo, 0, 100 * j + 20);
					ctx.setFontSize(8);
					ctx.fillText(time, 0, 100 * j + 40);
					for (let i = 1; i < 30; i++) {
						//这个for循环代表横向循环，
						// ctx.beginPath();
						ctx.setFontSize(16);
						ctx.setFillStyle('rgba(169,169,169,.6)');
						ctx.fillText(name, 85 * i, 100 * j);
						ctx.setFontSize(10);
						ctx.fillText(jobNo, 85 * i + 20, 100 * j + 20);
						ctx.setFontSize(8);
						ctx.fillText(time, 85 * i + 40, 100 * j + 40);
					}
				}
				for (let j = 0; j < 9; j++) {
					// ctx.beginPath();
					ctx.setFontSize(16);
					ctx.setFillStyle('rgba(169,169,169,.6)');

					ctx.fillText(name, 0, -100 * j);
					ctx.setFontSize(10);
					ctx.fillText(jobNo, 0, -100 * j + 20);
					ctx.setFontSize(8);
					ctx.fillText(time, 0, -100 * j + 20);
					for (let i = 1; i < 9; i++) {
						// ctx.beginPath();
						ctx.setFontSize(16);
						ctx.setFillStyle('rgba(169,169,169,.6)');
						ctx.fillText(name, 85 * i, -100 * j);
						ctx.setFontSize(10);
						ctx.fillText(jobNo, 85 * i + 20, -100 * j + 20);
						ctx.setFontSize(8);
						ctx.fillText(time, 85 * i + 40, -100 * j + 40);
					}
				}

				ctx.draw();
			}
		}
	};
</script>

<style>
	.water_top {
		position: fixed;
		/* z-index: -1; */
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		/* background-color: #007aff; */
	}
</style>